<template>
  <div class="c-w100">
    <div class="c-textAlign-c c-w100 c-p">
      <div class="c-w100 c-maxh427 c-text-hidden"><img class="c-w100" v-lazy='dataInfo.courseAvatar' alt="" /></div>
      <!-- <div class="time-mask c-translucent-70 c-pv24 c-fc-white c-textAlign-c c-ph24">
        <span class="c-fs40">预告时间</span>
        <div class="c-fs20 c-mv16">{{timeStr}}</div>
      </div> -->
      <div class="cfbg c-fc-white c-textAlign-c c-ph24 c-pa c-p c-p-l0 c-p-b0 c-fs24">
        开课时间:{{timeStr}}
      </div>
    </div>
    <div class="c-ph24 c-fs30 c-fw-b c-pt32">{{dataInfo.name}}</div>
    <div class="c-ph24 c-fs28 c-pb28 c-pt16 theme-fc c-lh">
      <span class="c-fs12" v-if="dataInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>
      <span>{{dataInfo.payType | priceValueFilter(dataInfo.price, cfrom.course)}}</span>
    </div>
    <div class="c-ph24 c-bd-t1">
      <div class="c-fs26 c-pt30 c-fw-b">详情</div>
      <div class="c-flex-row c-pt16 c-aligni-center">
        <img class="c-ww80 c-hh80 c-brp50" v-lazy="dataInfo.lecturerAvatar != '' && dataInfo.lecturerAvatar != null ? dataInfo.lecturerAvatar : require('@/assets/defult_head.png')" alt="">
        <div class="c-flex-column c-flex-grow1 c-hh80 c-justify-sa c-pl20 c-w0">
          <span class="c-fs26 c-lh32 c-fc-xbalck">{{dataInfo.lecturerName != '' && dataInfo.lecturerName != null ? dataInfo.lecturerName : '未知'}}</span>
          <div class="c-fs18 c-fc-gray c-lh28" v-if="dataInfo.lecturerTitle != '' && dataInfo.lecturerTitle != null">
            {{dataInfo.lecturerTitle}}
          </div>
        </div>
      </div>
    </div>
    <div v-if="dataInfo.courseType == 2" class="c-pt16 c-ph24 tinymce-text c-lh42 c-pb80 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll"  :class="dataInfo.isCopy == 0 ? 'closeBig copyNot' : 'aCloseBig'" v-html="dataInfo.content">
    </div>
    <div v-else class="c-pt16 c-ph24">
      <course-description ref="descriptions" :prodType="cfrom.course" :prodId="cId"></course-description>
    </div>
    <div class="c-bg-white c-flex-row c-justify-sb c-ph24 c-aligni-center c-pf c-maxw640 c-p-b0 c-w100 c-pv10 c-bd-t1">
      <span class="theme-fc c-fs26">分享给好友一起学习哦！</span>
      <div class="theme-bg c-fc-white c-fs24 c-hh60 c-ww170 c-lh60 c-textAlign-c c-br10" @click="isShowShare = true">立即分享</div>
    </div>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
  </div>
</template>
<script>
import shareMasker from "@/components/templates/common/shareMasker.vue";
import courseDescription from '@/components/templates/courseDescription';
import { utilJs, wxUtilJs } from "@/utils/common.js";
export default {
  name: 'CourseForenotice',
  components: {
    shareMasker,
    courseDescription
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      isShowShare: false,
      cId: -1,
      dataInfo: '',
      timeStr: '',
      cfrom: global.ckFrom,
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {},
  watch: {},
  methods: {
    clickDesc(e) {
      if (this.dataInfo.isCopy == 0) {
        return;
      }
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = this.dataInfo.name;
      let shareImg = this.dataInfo.courseAvatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cId=${this.cId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = `讲师${this.dataInfo.lecturerName ? this.dataInfo.lecturerName : ''}准备在${this.dataInfo.liveAt}开讲啦！`;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.dataInfo.name;
      let shareImg = this.dataInfo.courseAvatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cId=${this.cId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = `讲师${this.dataInfo.lecturerName ? this.dataInfo.lecturerName : ''}准备在${this.dataInfo.liveAt}开讲啦！`;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("课程预告");// eslint-disable-line
    this.dataInfo = '';
    this.timeStr = '';
    this.cId = this.$route.query.cId;
    let $this = this;
    utilJs.getMethod(global.apiurl + 'courses/previews/' + this.cId + '?isSkeleton=1', function (res) {
      if (res == '' || res == null) {
        let info = '该预告已下架，请联系管理员！';
        $this.$routerGo($this, "replace", { path: "/error/emptyPage", query: { from: '', info: info } });
        return;
      }
      let now = (new Date()).getTime();
      let eTime = utilJs.getTimeByDate(res.liveAt);
      //如果预告已经结束那么直接跳转到课程详情页面
      if (eTime > now) {
        $this.dataInfo = res;
        if (res.liveAt != '') {
          let t1 = res.liveAt.split(" ")[0].replace(/-/g, "/");
          let date = new Date(Date.parse(t1));
          let xqNUm = date.getDay();
          $this.timeStr = res.liveAt.split(" ")[0] + (xqNUm == 1 ? '星期一' : (xqNUm == 2 ? '星期二' : (xqNUm == 3 ? '星期三' : (xqNUm == 4 ? '星期四' : (xqNUm == 5 ? '星期五' : (xqNUm == 6 ? '星期六' : '星期日')))))) + res.liveAt.split(" ")[1].split(":")[0] + ":" + res.liveAt.split(" ")[1].split(":")[1];
        }
        $this.wechatShare();
      } else {
        let t = Number(res.courseType);
        let extId = res.columnId == 0 ? -1 : res.columnId;
        let ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
        switch (t) {
          case 0:
            $this.$routerGo($this, "replace", {
              path: "/homePage/course/video",
              query: { courseId: $this.cId, extId: extId, ckFrom: ckFrom }
            });
            break;
          case 1:
            $this.$routerGo($this, "replace", {
              path: "/homePage/course/voice",
              query: { courseId: $this.cId, extId: extId, ckFrom: ckFrom }
            });
            break;
          case 2:
            $this.$routerGo($this, "replace", {
              path: "/homePage/course/imgText",
              query: { courseId: $this.cId, extId: extId, ckFrom: ckFrom }
            });
            break;
        }
      }
      if ($this.dataInfo.courseType != 2) {
        $this.$nextTick(() => {
          $this.$refs.descriptions.getDescptionDetail();
        })
      }
    });
  },
  deactivated() {

  }
}
</script>
<style scoped>
.time-mask {
  position: absolute;
  width: 10rem;
  height: 4rem;
  left: 50%;
  top: 50%;
  margin-left: -5rem;
  margin-top: -2rem;
}

.c-translucent-70 {
  background-color: rgb(0, 0, 0);
  filter: alpha(opacity=10);
  -moz-opacity: 0.7; /*FF*/
  background-color: rgba(0, 0, 0, 0.7);
}
.cfbg {
  height: 1.4rem;
  line-height: 1.4rem;
  width: 100%;
  background-image: url("../../../assets/i/wap/course/cfbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
}
</style>
